<template>
  <div class="home">
    <div id="container"></div>
  </div>
</template>

<script>
import * as THREE from 'three'
export default {
  data() {
    return {
      renderer: null,
      camera: null,
      scene: null,
    }
  },
  mounted() {
    // this.login();
    this.threeInit()
  },
  methods: {
    // 初始化
    threeInit() {
      this.scene = new THREE.Scene()
      this.camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      )
      this.renderer = new THREE.WebGLRenderer()
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      document.body.appendChild(this.renderer.domElement)
      const geometry = new THREE.BoxGeometry(1, 1, 1)
      const material = new THREE.MeshBasicMaterial({ color: 0x42a5f5 })
      this.cube = new THREE.Mesh(geometry, material)
      this.scene.add(this.cube)
      this.camera.position.z = 5
      this.animate()
    },

    animate() {
      this.cube.rotation.x += 0.01
      this.cube.rotation.y += 0.01
      requestAnimationFrame(this.animate)
      this.renderer.render(this.scene, this.camera)
    },
  },
}
</script>

<style lang="less" scoped></style>
